{% extends "guild/base.html" %}
{% load mytag %}


<!-- CONTENT
  =====================================================================-->

{% block content %}

<div class="page input js_show">
    <div class="page__hd">
        <h1 class="page__title">YYZB公会管理后台</h1>
        <p class="page__desc">
            想了解更加详细的信息请点击《相关条款》。
        </p>
    </div>

    <div class="page__bd">
        <div class="weui-cells__title">个人信息</div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell weui-cell_vcode" style="height:45px">
                <div class="weui-cell__hd">
                    <label class="weui-label">手机号</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="tel" id="mobile" placeholder="请输入手机号">
                </div>
                <div class="weui-cell__ft" >
                    <a class="weui-vcode-btn" id="fetch_sms_button" disabled="disabled" href="javascript:fetch_sms_code()">获取验证码</a>
                </div>
            </div>
            <div class="weui-cell weui-cell_vcode" style="height:45px">
                <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="tel" id="sms_code" placeholder="请输入验证码">
                </div>
            </div>
        </div>
        <div class="weui-cells__tips">
            请在收到验证码后的1分钟之内输入验证码。
        </div>

        <br>
        <label for="weuiAgree" class="weui-agree">
            <input id="agree_terms" type="checkbox" class="weui-agree__checkbox" checked="checked">
            <span class="weui-agree__text">
                阅读并同意<a href="javascript:void(0);">《相关条款》</a>
            </span>
        </label>

        <div class="weui-btn-area">
            <a class="weui-btn weui-btn_block weui-btn_primary" href="javascript:login()">登录</a>
        </div>
    </div>

    <div class="page__ft">
        <a href="{% url 'guild:home' %}">
            <span class="bottom-logo">
               HiBao
           </span>
        </a>
    </div>
</div>

{% endblock content %}

<!-- SCRIPT
  =====================================================================-->

{% block extra_js %}
<script>

function fetch_sms_code() {
    const mobile = $('#mobile').val();
    if (!/^\d+$/.test(mobile)) {
        alert("无效的手机号码！");
        return;
    }

    // 隐藏获取验证码按钮
    $('#fetch_sms_button').hide();
    setTimeout(() => {
        $('#fetch_sms_button').show();
    }, 60 * 1000);

    var url = '{% url 'guild:smscode' %}';
    var data = {
        'mobile': mobile,
    };
    my_ajax(url, data, '', '', () => {
        show_toast('验证码已发送');
        console.log('send');
    });
}

function login() {
    const agree_terms = $("#agree_terms").is(':checked');
    console.log(`${agree_terms}`);
    if (!agree_terms) {
        alert("在绑定手机前，请阅读并同意《相关条款》。");
        return;
    }

    const mobile = $('#mobile').val();
    if (!/^\d+$/.test(mobile)) {
        alert("无效的手机号码！");
        return;
    }

    const sms_code = $('#sms_code').val();
    if (!/^\d+$/.test(sms_code)) {
        alert("无效的手机验证码!");
        return;
    }

    window.location = `/guild/login/${mobile}/${sms_code}/`;
}

</script>
{% endblock extra_js %}
